<!--物料产品管理-->
<template>
    <div>
        <template  v-if="!showDetails">
            <el-container>
                <el-aside class="pro-box" width="15%"
                          style="height: 83vh;border-right: #ffffff 1px solid;">
                    <div class="main-title">物料产品分类</div>
                    <div style="height: 80%;overflow: auto">
                        <el-menu style="background-color: white" @select="handleSelected"
                        >
                            <el-sub-menu index="1">
                                <template #title>
                                    <span>产品</span>
                                </template>
                                <template v-for="(item,index) in types">
                                    <el-menu-item v-if="item.category === 0" :index="item.idClassify+''">{{
                                            item.name
                                        }}
                                    </el-menu-item>
                                </template>
                            </el-sub-menu>
                            <el-sub-menu index="2">
                                <template #title>
                                    <span>物料</span>
                                </template>
                                <template v-for="(item,index) in types">
                                    <el-menu-item v-if="item.category === 1" :index="item.idClassify+''">{{
                                            item.name
                                        }}
                                    </el-menu-item>
                                </template>
                            </el-sub-menu>
                        </el-menu>
                    </div>
                </el-aside>
                <el-main>

                    <!--                修改阈值信息对话框-->
                    <make-inventory-dialog :visible="makeInvokeDialog" :details="details"
                                           @call-closed="makeDialogClosed"
                                           @called-update-success="updateInventoryCallback"

                    />
                    <!--                修改分类信息对话框-->
                    <make-product-and-material-classify-dialog
                        :visible="makeProductAndMaterialClassifyDialog" :details="details"
                        @call-closed="makeProductAndMaterialClassifyDialogClosed"
                        @called-update-success="updateClassifyCallback"
                    />
                    <!--                添加产品对话框-->
                    <add-product-and-material-drawer
                        :visible="addProductAndMaterialDrawer"
                        @call-closed="handleDrawerClosed"
                        @call-add-success="handleAddSuccess"
                    />


                    <div style="margin-top: 10px;margin-bottom: 30px">
                        <el-row justify="space-evenly">
                            <el-col :span="1">
                        <span style="line-height:30px;float: right">
                            型号
                        </span>
                            </el-col>
                            <el-col :span="3">
                                <el-input v-model="queryParams.model" placeholder="请输入物料编码"/>
                            </el-col>
                            <el-col :span="1">
                        <span style="line-height:30px;float: right">
                            名称
                        </span>
                            </el-col>
                            <el-col :span="3">
                                <el-input v-model="queryParams.name" placeholder="请输入物料名称"/>
                            </el-col>
                            <el-col :span="4">
                        <span style="line-height:30px;float: right">
                            状态
                        </span>
                            </el-col>
                            <el-col :span="3">
                                <el-select v-model="queryParams.stockStatus" placeholder="请选择">
                                    <el-option label="全部" value="999"></el-option>
                                    <el-option label="启用" value="1"></el-option>
                                    <el-option label="禁用" value="0"></el-option>
                                    <el-option label="已废弃" value="-1"></el-option>
                                </el-select>
                            </el-col>
                            <el-col :span="5">
                                <el-button-group>
                                    <el-button @click="handleQuery" type="primary">
                                        <bar-icon :icon="'select'" :width="15" :height="15" :color="'#ffffff'"/>
                                    </el-button>
                                    <el-button @click="handleResetQuery">
                                        <bar-icon :icon="'reset'" :width="15" :height="15" :color="'#24273a'"/>

                                    </el-button>
                                    <el-button @click="handleAdd" type="primary">
                                        <bar-icon :icon="'add'" :width="15" :height="15" :color="'#ffffff'"/>

                                    </el-button>
                                    <el-button @click="handleDelete" :disabled="!selected.length>0" type="danger">
                                        <bar-icon :icon="'delete'" :width="15" :height="15" :color="'#ffffff'"/>
                                    </el-button>
                                </el-button-group>
                            </el-col>
                        </el-row>
                    </div>
                    <el-table
                        height="600"
                        :data="tableData"
                        highlight-current-row
                        @selection-change="handleSelectionChange"
                        style="width: 100%"

                    >
                        <el-table-column type="selection" ></el-table-column>
                        <el-table-column width="80">
                            <div style="display: flex;align-items: center">
                                <bar-icon :icon="'fileDictionary'" :width="32" :height="32"/>
                            </div>
                        </el-table-column>
                        <el-table-column
                            prop="name"
                            label="名称">
                        </el-table-column>
                        <el-table-column width="150"
                                         prop="model"
                                         label="规格型号">
                        </el-table-column>
                        <el-table-column label="单位">
                            <template #default="scope">
                                <template v-if="scope.row.unitStatus === 1">
                                    <div >{{ scope.row.unitName }}</div>
                                </template>
                                <template v-if="scope.row.unitStatus === 0">
                                    <el-tooltip
                                        effect="dark"
                                        content="该单位已被禁用"
                                        placement="top">
                                        <!--                                    文本有删除线的div-->
                                        <div style="color: #d2d2d2;text-decoration: line-through">{{ scope.row.unitName }}</div>

                                    </el-tooltip>
                                </template>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="类别">
                            <template #default="scope">
                                <div>{{ scope.row.category === 0 ? '产品' : '物料' }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column

                            label="所属分类">
                            <template #default="scope">
                                <!--                            一个删除线样式的span-->
                                <span v-if="scope.row.isEnableAboutClassify === 0"
                                      style="text-decoration: line-through;color: #d2d2d2">{{
                                        scope.row.classifyName
                                    }}</span>
                                <el-tooltip
                                    class="box-item"
                                    effect="dark"
                                    content="点击更新分类信息"
                                    placement="top"
                                >
                                    <el-tag style="cursor:pointer;" @click="updateClassify(scope.row)"
                                            v-if="scope.row.isEnableAboutClassify === 0"
                                            type="info">已弃用
                                    </el-tag>
                                </el-tooltip>

                                <span v-if="scope.row.isEnableAboutClassify === 1">{{ scope.row.classifyName }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="是否启用">
                            <template #default="scope">
                                <div v-if="scope.row.stockStatus === '1'">
                                    <el-tooltip
                                        effect="dark"
                                        content="设置禁用"
                                        placement="top"
                                    >
                                        <bar-icon style="cursor:pointer;" @click="handleUpdateStatus(scope.row,'0')"
                                                  :icon="'enable'" :width="20" :height="20" :color="'#00A0E9'"/>
                                    </el-tooltip>
                                </div>
                                <div v-if="scope.row.stockStatus === '0'">
                                    <el-tooltip
                                        effect="dark"
                                        content="设置启用"
                                        placement="top"
                                    >
                                        <bar-icon style="cursor:pointer;" @click="handleUpdateStatus(scope.row,'1')"
                                                  :icon="'disable'" :width="20" :height="20" :color="'#d2d2d2'"/>
                                    </el-tooltip>
                                </div>

                                <div v-if="scope.row.stockStatus === '-1'">
                                    <el-tooltip
                                        effect="dark"
                                        content="已废弃"
                                        placement="top"
                                    >
                                        <bar-icon style="cursor:pointer;" @click="handleUpdateStatus(scope.row,'1')"
                                                  :icon="'dis-enable'" :width="20" :height="20" :color="'#ff4242'"/>
                                    </el-tooltip>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="库存状态">
                            <template #default="scope">

                                <el-tooltip
                                    class="box-item"
                                    effect="dark"
                                    content="设置安全库存阈值"
                                    placement="top"
                                >
                                    <div style="cursor:pointer;" @click="handleMakeInventory(scope.row)">
                                        <el-tag v-if="scope.row.inventory===null" type="info">未设置</el-tag>
                                        <el-tag v-else-if="(scope.row.count-scope.row.inventory)===0" type="warning">无库存
                                        </el-tag>
                                        <el-tag v-else-if="(scope.row.count-scope.row.inventory)>0" type="success">正常
                                        </el-tag>
                                        <el-tag v-else type="danger">缺货</el-tag>
                                    </div>
                                </el-tooltip>

                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="createTime"
                            label="创建时间">
                        </el-table-column>
                        <el-table-column
                            width="120"
                            label="操作">
                            <template #default="scope">
                                <el-row justify="start">
                                    <el-col :span="5">
                                        <el-tooltip
                                            content="查看详情"
                                            effect="dark"
                                            placement="top"
                                        >
                                            <bar-icon :icon="'see'" :width="28" :height="28" :color="'#3475fe'"
                                                      @click="makeDetails(scope.row)"
                                                      style="cursor:pointer;"/>
                                        </el-tooltip>
                                    </el-col>
                                    <el-col :span="4">

                                    </el-col>
                                    <el-col :span="5">
                                        <el-tooltip
                                            content="删除"
                                            effect="dark"
                                            placement="top"
                                        >
                                            <bar-icon @click="handleUpdateStatus(scope.row,'-1')" :icon="'delete'"
                                                      :width="13" :height="13" :color="'#ff4747'"
                                                      style="cursor:pointer;"/>

                                        </el-tooltip>

                                    </el-col>
                                </el-row>
                            </template>
                        </el-table-column>

                    </el-table>
                    <div class="pagination-block">
                        <el-pagination layout="prev, pager, next" :total="total" @change="handleChanged"/>
                    </div>
                </el-main>
            </el-container>
        </template>
        <template v-if="showDetails">
            <material-detail :details="details" @getBack="handleBack"/>
        </template>
    </div>
</template>

<script>
import mdAPI from '../../util/request-md/mat-pro/mat-pro.js'
import BarIcon from '../../components/widget/icon/BarIcon.vue'
import MaterialDetail from './detail/MaterialDetail.vue'
import MakeInventoryDialog from '../../components/widget/dialog/MakeInventoryDialog.vue'
import MakeProductAndMaterialClassifyDialog
    from '../../components/widget/dialog/MkeProductAndMaterialClassifyDialgo.vue'
import AddProductAndMaterialDrawer from '../../components/widget/drawer/AddProductAndMaterialDrawer.vue'

export default {
    name: 'pro.vue',
    components: {
        MakeInventoryDialog,
        BarIcon,
        MaterialDetail,
        MakeProductAndMaterialClassifyDialog,
        AddProductAndMaterialDrawer
    },
    data() {
        return {
            types: [],
            tableData: [
                {}
            ],
            selected: [],
            details: {},
            showDetails: false,
            addProductAndMaterialDrawer: false,
            total: 22,
            makeInvokeDialog: false,
            makeProductAndMaterialClassifyDialog: false,
            queryParams: {
                name: '',
                classify: -1,
                model: '',
                stockStatus: '999',
                page: 1,
                limit: 10
            },

        }
    },
    methods: {
        getMaterialAndProduct(params) {
            mdAPI.getMaterialAndProduct(params, ((res) => {
                if (res.code === 200) {
                    console.log(res.data);
                    this.tableData = res.data;
                    this.total = parseInt(res.msg);
                    console.log(this.total, ">>>>total");
                }
            }))
        },
        handleDrawerClosed() {
            this.addProductAndMaterialDrawer = false;
        },
        makeDialogClosed() {
            this.makeInvokeDialog = false;
        },
        handleChanged(currentNum, pageSize) {
            this.queryParams.page = currentNum;
            mdAPI.getMaterialAndProduct(this.queryParams, ((res) => {
                if (res.code === 200) {
                    console.log(res.data);
                    this.tableData = res.data;
                    this.total = parseInt(res.msg);
                }
            }))
        },
        updateInventoryCallback(data) {

        },
        //处理修改类型对话框关闭事件
        makeProductAndMaterialClassifyDialogClosed() {
            this.makeProductAndMaterialClassifyDialog = false;

        },
        //分类信息更新成功后的事件
        updateClassifyCallback(data) {
            this.details.classifyName = data.label;
            this.details.isEnableAboutClassify = 1;
            this.makeProductAndMaterialClassifyDialog = false;
        },
        handleClick() {
            console.log("点击了")
        },
        //获取分类信息
        getClassifyInfo() {
            mdAPI.getMatProClassify(((res) => {
                if (res.code === 200) {
                    this.types = res.data;
                } else {
                    this.$message.error("网络不佳，请稍后再试");
                }
            }));
        },
        makeDetails(data) {
            this.details = data;
            localStorage.setItem("details", JSON.stringify(data));
            console.log(localStorage.getItem('details'),"设置了details");
            this.showDetails = true;
        },
        //细节展示，回退事件
        handleBack() {
            this.details = [];
            this.showDetails = false;
            this.getMaterialAndProduct(this.queryParams);
        },
        handleSelected(data) {
            //菜单发生改变 data是分类的id
            this.queryParams.classify = data;
            this.getMaterialAndProduct(this.queryParams)
        },
        //查询按钮的方法
        handleQuery() {
            this.getMaterialAndProduct(this.queryParams);
        },
        //重置查询按钮、
        handleResetQuery() {
            this.queryParams = {
                name: '',
                classify: -1,
                model: '',
                stockStatus: '999',
                page: 1,
                limit: 10
            };
            this.getMaterialAndProduct(this.queryParams);
        },
        //更新商品状态
        handleUpdateStatus(data, status) {
            if (data.stockStatus === '-1') {
                // 提示是否恢复状态
                this.$confirm('是否确认恢复状态?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 确认恢复状态
                    let updateStatusParam = {
                        id: data.id,
                        status: status,
                        category: data.category
                    };
                    mdAPI.updateProductStatus(updateStatusParam, ((res) => {
                        if (res.code === 200) {
                            // data.stockStatus = data.stockStatus === '1' ? '0' : '1'
                            data.stockStatus = status;
                            this.$message.success("操作成功");
                        } else {
                            this.$message.error("网络不佳，请稍后再试");
                        }
                    }))
                }).catch(() => {
                    // 取消恢复状态
                    this.$message({
                        type: 'info',
                        message: '已取消恢复状态'
                    });
                });
            } else {
                let updateStatusParam = {
                    id: data.id,
                    status: status,
                    category: data.category
                };
                mdAPI.updateProductStatus(updateStatusParam, ((res) => {
                    if (res.code === 200) {
                        // data.stockStatus = data.stockStatus === '1' ? '0' : '1'
                        data.stockStatus = status;
                        this.$message.success("操作成功");
                    } else {
                        this.$message.error("网络不佳，请稍后再试");
                    }
                }))
            }


        },
        //设置库存阈值信息
        handleMakeInventory(data) {
            this.details = data;
            this.makeInvokeDialog = true;
        },
        //修改产品分类信息
        updateClassify(data) {
            this.details = data;
            this.makeProductAndMaterialClassifyDialog = true;
        },
        //唤醒添加产品无聊的抽屉
        handleAdd() {
            this.addProductAndMaterialDrawer = true;
        },
        //批量选择
        handleSelectionChange(data) {
            //查看data中有没有stockStatus === -1 的
            for (let i = 0; i < data.length; i++) {
                if (data[i].stockStatus === '-1') {
                    this.$message.error("注意！您选的数据中有不可用数据，请重新选择");
                    return;
                }
            }
            this.selected = data;
        },
        //批量删除
        handleDelete() {
            if (this.selected.length === 0) {
                this.$message.error("请选择要删除的数据");
            } else {
                this.$confirm('是否确认删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 确认删除
                    for (let i = 0; i < this.selected.length; i++) {
                        // console.log(this.selected[i].id)
                        let updateStatusParam = {
                            id: this.selected[i].id,
                            status: -1,
                            category: this.selected[i].category
                        };
                        mdAPI.updateProductStatus(updateStatusParam, ((res) => {
                            if (res.code === 200) {
                                // data.stockStatus = data.stockStatus === '1' ? '0' : '1'
                                this.selected[i].stockStatus = -1;
                            } else {
                                this.$message.error("网络不佳，请稍后再试");
                            }
                        }))
                    }

                    this.$message.success("操作成功");

                })
            }
        },
        handleAddSuccess(){
            this.getMaterialAndProduct(this.queryParams);
            this.addProductAndMaterialDrawer = false;
        }
    },
    mounted() {
        this.getMaterialAndProduct(this.queryParams);
        this.getClassifyInfo();
    }

}
</script>

<style scoped>
/*.main-title {*/
/*    margin: 20px 50px 20px 70px;*/
/*}*/

.pagination-block {
    position: absolute;
    display: block;
    bottom: 5px;
}
</style>
